<template>
  <div class="dynamic-view">
    <h2>动态内容区域 ({{ currentRoute.path }})</h2>
    <p>这是 {{ currentRoute.path }} 页面的动态内容</p>
    <!-- 根据路径显示不同的内容 -->
    <div v-if="componentLoaded">
      <component :is="dynamicComponent" />
    </div>
    <div v-else class="loading">
      <p>正在加载组件...</p>
    </div>
  </div>
</template>

<script>
import { ref, shallowRef, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  name: 'DynamicView',
  setup() {
    const currentRoute = useRoute();
    const dynamicComponent = shallowRef(null);
    const componentLoaded = ref(false);

    // 根据路径动态加载组件
    const loadComponent = async () => {
      try {
        // 根据不同的路径加载不同的组件
        let componentModule;
        switch(currentRoute.path) {
          case '/admin/bookings':
            componentModule = await import('@/components/admin/BookingManagement.vue');
            break;
          case '/admin/orders':
            componentModule = await import('@/components/admin/OrderManagement.vue');
            break;
          case '/admin/youbi':
            componentModule = await import('@/components/admin/YoubiManagement.vue');
            break;
          case '/admin/messages':
            componentModule = await import('@/components/admin/MessageManagement.vue');
            break;
          case '/admin/settings':
            componentModule = await import('@/views/admin/AdminSettings.vue');
            break;
          case '/admin/courses':
            componentModule = await import('@/components/admin/CourseManagement.vue');
            break;
          case '/admin/schedules':
            componentModule = await import('@/components/admin/ScheduleManagement.vue');
            break;
          case '/admin/users':
            componentModule = await import('@/components/admin/UserManagement.vue');
            break;
          case '/admin/roles':
            componentModule = await import('@/components/admin/RoleManagement.vue');
            break;
          case '/admin/permissions':
            componentModule = await import('@/components/admin/PermissionManagement.vue');
            break;
          case '/admin/menus':
            componentModule = await import('@/components/admin/MenuManagement.vue');
            break;
          case '/admin/user-roles':
            componentModule = await import('@/components/admin/UserRoleManagement.vue');
            break;
          default:
            // 默认显示一个通用的管理组件
            componentModule = await import('@/views/admin/Overview.vue');
        }

        dynamicComponent.value = componentModule.default;
        componentLoaded.value = true;
      } catch (error) {
        console.error(`Error loading component for ${currentRoute.path}:`, error);
        componentLoaded.value = false;
      }
    };

    onMounted(() => {
      loadComponent();
    });

    // 监听路径变化，重新加载组件
    watch(() => currentRoute.path, () => {
      componentLoaded.value = false;
      loadComponent();
    });

    return {
      dynamicComponent: dynamicComponent,
      componentLoaded: componentLoaded,
      currentRoute: currentRoute
    };
  }
};
</script>

<style scoped>
.dynamic-view {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100%;
}
</style>